<template>
  <div id="app" v-bind:style="appDivStyle">
    <div class="context" ref="context">
      <div class="queryBox" ref="queryBox">
        <el-form :inline="true" :model="formQueryCondition" ref="form" size="mini">
          <el-form-item :label="$t('queryLabel.onTimeOrder.userAccount')" :label-width="queryformLabelWidth">
            <el-input v-model.trim="formQueryCondition.userAccount.val" class="queryItemStyle" clearable
                      :placeholder="$t('queryLabel.onTimeOrder.placeholderUserAccount')">
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('queryLabel.onTimeOrder.productName')" :label-width="queryformLabelWidth">
            <el-input v-model.trim="formQueryCondition.productName.val" class="queryItemStyle" clearable
                      :placeholder="$t('queryLabel.onTimeOrder.placeholderProductName')">
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('queryLabel.onTimeOrder.orderStatus')" :label-width="queryformLabelWidth">
            <el-select v-model.trim="formQueryCondition.orderStatus.val" class="queryItemStyle" placeholder="请选择">
              <el-option :label="$t('label.available')" value="Available"></el-option>
              <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('queryLabel.onTimeOrder.productCode')" :label-width="queryformLabelWidth">
            <el-input v-model.trim="formQueryCondition.productCode.val" class="queryItemStyle" clearable
                          :placeholder="$t('queryLabel.onTimeOrder.placeholderProductCode')">
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('queryLabel.onTimeOrder.orderTimeS')" :label-width="queryformLabelWidth">
            <el-date-picker v-model="formQueryCondition.orderTimeS.val" class="queryItemStyle" placeholder="请选择">
            </el-date-picker>
          </el-form-item>

          <el-form-item :label="$t('queryLabel.onTimeOrder.orderTimeE')" :label-width="queryformLabelWidth">
            <el-date-picker v-model="formQueryCondition.orderTimeE.val" class="queryItemStyle" placeholder="请选择">
            </el-date-picker>
          </el-form-item>


          <div style="text-align:right">
             <el-form-item>
                <el-button type="primary" @click="onImport(scope.$index,scope.row)">{{ $t('btnText.importBtnText') }}</el-button>
             </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="onExport" icon="el-icon-download" :loading="loading">{{ $t('btnText.exportBtnText') }}</el-button>
             </el-form-item>
            <el-form-item>
             <el-button type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
             </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onQuery" icon="el-icon-search" :loading="loading">
                {{$t('btnText.queryBtnText')}}
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!--数据网格-->
      <div class="dataBox" ref="dataBox" >
                <el-table v-if="isInit" ref="singleTable"
                            :data="tableData"
                            :height="tableHeight"
                            @sort-change="sortChange"
                            v-loading="loading" size="mini"
                            style="width: 100%;" stripe=stripe border=border>
                    <el-table-column type="index"  width="50" fixed="left"
                                        :label="$t('table.xh')" align="center">
                    </el-table-column>
                    <el-table-column prop="orderCode" min-width="110" fixed="left" :label="$t('table.onTimeOrder.orderCode')" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="userAccount" min-width="110" fixed="left" :label="$t('table.onTimeOrder.userAccount')" sortable="custom" sort-by="productType">
                    </el-table-column>
                    <el-table-column prop="productName" min-width="110" fixed="left" :label="$t('table.onTimeOrder.productName')" sortable="custom" sort-by="productName">
                    </el-table-column>
                    <el-table-column prop="productCode" min-width="150" :label="$t('table.onTimeOrder.productCode')" sortable="custom" sort-by="productCode">
                    </el-table-column>

                    <el-table-column prop="orderTime" min-width="150" :label="$t('table.onTimeOrder.orderTime')" sortable="custom" sort-by="orderTime">
                    </el-table-column>
                    <el-table-column prop="effectiveTime" min-width="150" :label="$t('table.onTimeOrder.effectiveTime')" sortable="custom" sort-by="effectiveTime">
                    </el-table-column>
                    <el-table-column prop="status" min-width="150" :label="$t('table.onTimeOrder.status')" sortable="custom" sort-by="status">
                    </el-table-column>
                    <el-table-column prop="invalidTime" min-width="150" :label="$t('table.onTimeOrder.invalidTime')" sortable="custom" sort-by="invalidTime">
                    </el-table-column>
                    <el-table-column prop="paymentStatus" min-width="150" :label="$t('table.onTimeOrder.paymentStatus')" sortable="custom" sort-by="paymentStatus">
                    </el-table-column>
                    <el-table-column prop="automaticRenew" min-width="150" :label="$t('table.onTimeOrder.automaticRenew')" sortable="custom" sort-by="automaticRenew">
                    </el-table-column>
                </el-table>

            </div>
    </div>
     <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>
  </div>
</template>

<script>
import comBaseVue from '../../baseViewModel';
export default {
  mixins: [comBaseVue],
  name:'Product',
  data(){
    return {
        isInit:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"product.model.OnTimeOrder",
        formQueryCondition: {
          userAccount:{
            val:'',
            op:'LIKE' //操作符
          },
            productName:{
              val:'',//查询的值
              op:'LIKE' //操作符
            },
            productCode:{
              val:'',
              op:"like"
            },
            orderStatus:{
              val:''
            },
            orderTimeS:{
              val:''
            },
            orderTimeE:{
              val:''
            }
        }
    }
  },
  methods:{
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.productName.val = "";
        this.formQueryCondition.productCode.val = "";
        this.formQueryCondition.userAccount.val = "";
        this.formQueryCondition.orderStatus.val = "";
        this.formQueryCondition.orderTimeS.val = "";
        this.formQueryCondition.orderTimeE.val = "";
    },
  },
   mounted: function mounted() {
    this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
    this.isInit = true;
    this.onQuery();

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>


